<template>
  <div class="s-student" :style="{marginBottom: initMargin}">
      <div class="s-score" :style="{paddingTop: scoreMargin,paddingBottom: scorePaddingBottom,fontSize: scorFontSize,marginTop: initMarginTop}" v-for="s in scoreList" v-bind:key="s.id">
        <span class="demonstration">{{s.name}}</span>
        <el-rate class="s-star" :style="{marginTop: initStarMargin}" v-model="s.score"></el-rate>
      </div>
      <div class="s-rate" :style="{paddingTop: initRateMarginTop,paddingBottom: initRateMarginBottom,fontSize: scorFontSize,marginTop: initMarginTop}" v-for="rate in rateList" v-bind:key="rate.id">
        <span class="demonstration">{{rate.name}}</span>
        <textarea class="s-textarea" :style="{width: initTestWidth,height:initTestHeight,paddingTop: scorFontSize,paddingLeft: initTestPadding,fontSize: initTestFontSize,marginTop: scoreMargin,marginBottom: scoreMargin,marginLeft: initRateMarginBottom,marginRight: initRateMarginBottom,borderWidth: initBorder}"
          type="textarea"
          placeholder="请输入内容"
          v-model="rate.value"></textarea>
      </div>
      <div class="s-submit" :style="{marginTop: initSubmitMarginTop}"><mt-button class="s-button" :style="{height: initButtonHeight,lineHeight: initButtonLine,fontSize: initButtonFont}" type="default" @click="sub">提交</mt-button></div>
  </div>
</template>

<script>
  import { fetchList } from '@/api/courseRate'
  import { putRateDetail } from '@/api/courseRateDetail'
  import { Toast } from 'mint-ui'
  export default {
    data () {
      return {
        query: {
          id: this.$route.query.id
        },
        courseRateList: [],
        scoreList: [],
        rateList: [],
        listQuery: {}
      }
    },
    created () {
      this.getRateNames()
    },
    computed: {
      scoreMargin () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      scorePaddingBottom () {
        return this.clientWidth * 45 / 750 + 'px'
      },
      scorFontSize () {
        return this.clientWidth * 26 / 750 + 'px'
      },
      initStarMargin () {
        return this.clientWidth * 34 / 750 + 'px'
      },
      initRateMarginTop () {
        return this.clientWidth * 37 / 750 + 'px'
      },
      initRateMarginBottom () {
        return this.clientWidth * 40 / 750 + 'px'
      },
      initTestWidth () {
        return this.clientWidth * 690 / 750 + 'px'
      },
      initTestHeight () {
        return this.clientWidth * 146 / 750 + 'px'
      },
      initTestPadding () {
        return this.clientWidth * 25 / 750 + 'px'
      },
      initTestFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initSubmitMarginTop () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      initButtonHeight () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      initButtonLine () {
        return this.clientWidth * 40 / 750 + 'px'
      },
      initButtonFont () {
        return this.clientWidth * 40 / 750 + 'px'
      },
      initMarginTop () {
        return this.clientWidth * 15 / 750 + 'px'
      },
      initBorder () {
        return this.clientWidth * 1 / 750 + 'px'
      },
      initMargin () {
        return this.clientWidth * 113 / 750 + 'px'
      }
    },
    methods: {
      getRateNames () {
        this.listQuery.id = this.query.id
        fetchList(this.listQuery).then(response => {
          this.courseRateList = response.data
          for (var i in this.courseRateList) {
            if (this.courseRateList[i].type === 0) {
              this.scoreList.push(this.courseRateList[i])
            } else if (this.courseRateList[i].type === 1) {
              this.rateList.push(this.courseRateList[i])
            }
          }
        })
      },
      sub () {
        this.listQuery.rateList = []
        for (var i in this.rateList) {
          this.listQuery.rateList.push(this.rateList[i])
        }
        for (var j in this.scoreList) {
          this.listQuery.rateList.push(this.scoreList[j])
        }
        let id = this.query.id
        putRateDetail(this.listQuery).then(response => {
          if (response.data === 'SUCCESS') {
            this.$router.push({path: '/studentEndScore', query: {id: id}})
          } else {
            let message = '评分失败！'
            Toast({
              message: message,
              duration: 3 * 1000
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
    .s-score{
      text-align: center;
      color: #5B6175 100%;
      font-family: 微软雅黑;
      background-color: #ffffff;
    }
    .s-student{
      background-color: #F8F8FC;
    }
    .s-rate{
      text-align: center;
      color: #5B6175 100%;
      font-family: 微软雅黑;
      background-color: #ffffff;
    }
    .s-textarea{
      color: #5B6175;
      background-color: #F8F8FC;
      font-family: 微软雅黑;
      fill: #F5F5F7;
      border: solid #EAEBF3;
    }
    .s-submit{
      text-align: center;
    }
    .s-button{
    width: 100%;
    color: #ffffff;
    background-color: #00b685;
    }
</style>


